---
title: Examples
description: A few examples that demonstrate what you can do with React Three Fiber
nav: 3
---

## Showcase

<Grid cols={1}>
  <li>
    <Codesandbox id="6d97z4" tags={['selection', 'tiltshift']} />
  </li>
</Grid>
<Grid cols={2}>
  <li>
    <Codesandbox id="9s2wd9" tags={['border-radius']} />
  </li>
  <li>
    <Codesandbox id="7qytdw" tags={['bruno', 'simon', 'threejs-journey', 'fisheye']} />
  </li>
  <li>
    <Codesandbox id="xy8c8z" tags={['lusion', 'n8ao']} />
  </li>
  <li>
    <Codesandbox id="nvk9pf" tags={['ecctrl', 'character-controller']} />
  </li>
  <li>
    <Codesandbox id="bst0cy" tags={['effects', 'bloom', 'dof', 'reflections']} />
  </li>
  <li>
    <Codesandbox id="2ycs3" tags={['effects', 'dof', 'bananas']} />
  </li>
  <li>
    <Codesandbox id="ioxywi" tags={['configurator', 't-shirt', 'soft-shadows']} />
  </li>
  <li>
    <Codesandbox id="szj6p7" tags={['caustics', 'effects', 'soft-shadows']} />
  </li>
</Grid>
<Grid cols={4}>
  <li>
    <Codesandbox id="5w35n6" tags={['ssgi', 'rapier']} />
  </li>
  <li>
    <Codesandbox id="gwthnh" tags={['clouds']} />
  </li>
  <li>
    <Codesandbox id="2y73c6" tags={['motion-path', 'clouds']} />
  </li>
  <li>
    <Codesandbox id="ykfpwf" tags={['caustics', 'effects', 'soft-shadows']} />
  </li>
  <li>
    <Codesandbox id="yggpw5" tags={['godrays', 'reflections']} />
  </li>
  <li>
    <Codesandbox id="9m4tpc" tags={['portals']} />
  </li>
  <li>
    <Codesandbox id="qvk72r" tags={['portals']} />
  </li>
  <li>
    <Codesandbox id="drc6qg" tags={['portals']} />
  </li>
  <li>
    <Codesandbox id="hmbn1l" tags={['video', 'cookies', 'caustics']} />
  </li>
  <li>
    <Codesandbox id="dq6wwe" tags={['glass', 'transmission', 'bloom']} />
  </li>
  <li>
    <Codesandbox id="dc5fjy" tags={['cards', 'image']} />
  </li>
  <li>
    <Codesandbox id="3ywzzx" tags={['refraction']} />
  </li>
  <li>
    <Codesandbox id="lx2h8" tags={['reflections', 'annotations']} />
  </li>
  <li>
    <Codesandbox id="l4klb" tags={['scroll', 'controls']} />
  </li>
  <li>
    <Codesandbox id="zxpv7" tags={['physics']} />
  </li>
  <li>
    <Codesandbox id="0n9it" tags={['html', 'annotations']} />
  </li>
  <li>
    <Codesandbox id="imn42" tags={['frosted', 'glass', 'transmission']} />
  </li>
  <li>
    <Codesandbox id="pbwi6i" tags={['gltfjsx', 'effects', 'bloom', 'soft-shadows']} />
  </li>
  <li>
    <Codesandbox id="fslt99" tags={['effects', 'reflections', 'ssr', 'bloom']} />
  </li>
  <li>
    <Codesandbox id="2qfxj4" tags={['rapier', 'physics', 'soft-shadows']} />
  </li>
  <li>
    <Codesandbox id="2n98yj" tags={['scroll', 'refraction', 'lens']} />
  </li>
  <li>
    <Codesandbox id="e662p3" tags={['effects', 'bloom', 'reflections']} />
  </li>
  <li>
    <Codesandbox id="j3ycvl" tags={['effects', 'bloom']} />
  </li>
  <li>
    <Codesandbox id="lwo219" tags={['custom', 'environments']} />
  </li>
  <li>
    <Codesandbox id="qxjoj" tags={['gltfjsx', 'configurator']} />
  </li>
  <li>
    <Codesandbox id="dvokj" tags={['audio', 'analyser']} />
  </li>
  <li>
    <Codesandbox id="bfplr" tags={['ground', 'reflections', 'video-texture']} />
  </li>
  <li>
    <Codesandbox id="ni6v4" tags={['bruno-simon', 'threejs-journey']} />
  </li>
  <li>
    <Codesandbox id="9keg6" tags={['html', 'iframe']} />
  </li>
  <li>
    <Codesandbox id="f79ucc" tags={['splinetool', 'iframe']} />
  </li>
  <li>
    <Codesandbox id="zqrreo" tags={['refraction']} />
  </li>
  <li>
    <Codesandbox id="4gy946" tags={['refraction', 'instanced']} />
  </li>
  <li>
    <Codesandbox id="q48jgy" tags={['ground-projected-env']} />
  </li>
  <li>
    <Codesandbox id="ju368j" tags={['splinetool', 'transmission']} />
  </li>
  <li>
    <Codesandbox id="mlgzsc" tags={['transmission', 'csg']} />
  </li>
  <li>
    <Codesandbox id="y52tmt" tags={['csg']} />
  </li>
  <li>
    <Codesandbox id="hg3ejl" tags={['scroll', 'animation', 'effects', 'tiltshift']} />
  </li>
  <li>
    <Codesandbox id="ssbdsw" tags={['physics', 'effects', 'n8ao']} />
  </li>
  <li>
    <Codesandbox id="024uom" tags={['html', 'input']} />
  </li>
  <li>
    <Codesandbox id="gsm1y" tags={['scroll']} />
  </li>
  <li>
    <Codesandbox id="x8gvs" tags={['scroll']} />
  </li>
  <li>
    <Codesandbox id="yjhzv" tags={['scroll']} />
  </li>
  <li>
    <Codesandbox id="qpfgyp" tags={['effects', 'particles']} />
  </li>
  <li>
    <Codesandbox id="62o18n" tags={['cross-fade', 'transitions']} />
  </li>
  <li>
    <Codesandbox id="8j36ok" tags={['transmission', 'portals', 'physics']} />
  </li>
  <li>
    <Codesandbox id="n7jf0f" tags={['transmission', 'portals']} />
  </li>
  <li>
    <Codesandbox id="ik11ln" tags={['portals', 'blend']} />
  </li>
  <li>
    <Codesandbox id="lxvqek" />
  </li>
  <li>
    <Codesandbox id="if9crg" />
  </li>
  <li>
    <Codesandbox id="xzi6ps" />
  </li>
  <li>
    <Codesandbox id="qvb1vk" />
  </li>
  <li>
    <Codesandbox id="hxcc1x" />
  </li>
  <li>
    <Codesandbox id="8pbw1f" />
  </li>
  <li>
    <Codesandbox id="mw0dtc" />
  </li>
  <li>
    <Codesandbox id="8flefh" />
  </li>
  <li>
    <Codesandbox id="7e9y1b" />
  </li>
  <li>
    <Codesandbox id="whnhyr" />
  </li>
  <li>
    <Codesandbox id="0c5hv9" />
  </li>
  <li>
    <Codesandbox id="0fqow2" />
  </li>
  <li>
    <Codesandbox id="2ij9u" />
  </li>
  <li>
    <Codesandbox id="42glz0" />
  </li>
  <li>
    <Codesandbox id="ledhe1" />
  </li>
  <li>
    <Codesandbox id="nurp5t" />
  </li>
  <li>
    <Codesandbox id="2csbr1" />
  </li>
  <li>
    <Codesandbox id="go0b4w" />
  </li>
  <li>
    <Codesandbox id="s006f" />
  </li>
  <li>
    <Codesandbox id="l900i" />
  </li>
  <li>
    <Codesandbox id="qyz5r" />
  </li>
  <li>
    <Codesandbox id="kv7tv" />
  </li>
  <li>
    <Codesandbox id="ls503" />
  </li>
  <li>
    <Codesandbox id="n60qg" />
  </li>
  <li>
    <Codesandbox id="4jr4p" />
  </li>
  <li>
    <Codesandbox id="kud9p" />
  </li>
  <li>
    <Codesandbox id="zgsyn" />
  </li>
  <li>
    <Codesandbox id="i6t0j" />
  </li>
  <li>
    <Codesandbox id="h8o2d" />
  </li>
  <li>
    <Codesandbox id="wu51m" />
  </li>
  <li>
    <Codesandbox id="tu24h" />
  </li>
  <li>
    <Codesandbox id="jz9l97qn89" />
  </li>
  <li>
    <Codesandbox id="prb9t" />
  </li>
  <li>
    <Codesandbox id="pecl6" />
  </li>
  <li>
    <Codesandbox id="sbf2i" />
  </li>
  <li>
    <Codesandbox id="t4l0f" />
  </li>
  <li>
    <Codesandbox id="wdzv4" />
  </li>
  <li>
    <Codesandbox id="6hi1y" />
  </li>
  <li>
    <Codesandbox id="1sccp" />
  </li>
  <li>
    <Codesandbox id="q23sw" />
  </li>
  <li>
    <Codesandbox id="gpioq" />
  </li>
  <li>
    <Codesandbox id="3rjsl" />
  </li>
  <li>
    <Codesandbox id="4j2q2" />
  </li>
  <li>
    <Codesandbox id="dh2jc" />
  </li>
  <li>
    <Codesandbox id="gkfhr" />
  </li>
  <li>
    <Codesandbox id="0buje" />
  </li>
  <li>
    <Codesandbox id="5oufp" />
  </li>
  <li>
    <Codesandbox id="f1ixt" />
  </li>
  <li>
    <Codesandbox id="7psew" />
  </li>
  <li>
    <Codesandbox id="vl221" />
  </li>
  <li>
    <Codesandbox id="oep9o" />
  </li>
  <li>
    <Codesandbox id="tx1pq" />
  </li>
</Grid>

## Game prototypes

<Grid>
  <li>
    <Codesandbox id="lo6kp" />
  </li>
  <li>
    <Codesandbox id="rmfcq" />
  </li>
  <li>
    <Codesandbox id="i2160" />
  </li>
  <li>
    <Codesandbox id="vkgi6" />
  </li>
  <li>
    <Codesandbox id="2yqpv" />
  </li>
  <li>
    <Codesandbox id="ptdgrn" />
  </li>
  <li>
    <Codesandbox id="66cd7" />
  </li>
</Grid>

## Basic examples

<Grid>
  <li>
    <Codesandbox id="rrppl0y8l4" />
  </li>
  <li>
    <Codesandbox id="yup2o" />
  </li>
  <li>
    <Codesandbox id="0z8i2c" />
  </li>
  <li>
    <Codesandbox id="txzeq8" />
  </li>
  <li>
    <Codesandbox id="pj7zjq" />
  </li>
  <li>
    <Codesandbox id="wlz1o0" />
  </li>
  <li>
    <Codesandbox id="7n2yru" />
  </li>
  <li>
    <Codesandbox id="z3f2mw" />
  </li>
  <li>
    <Codesandbox id="btsbj" />
  </li>
  <li>
    <Codesandbox id="rz2g0" />
  </li>
  <li>
    <Codesandbox id="8fo01" />
  </li>
  <li>
    <Codesandbox id="7duy8" />
  </li>
  <li>
    <Codesandbox id="bp6tmc" tags={['views', 'portals']} />
  </li>
  <li>
    <Codesandbox id="r9w2ob" tags={['views', 'portals']} />
  </li>
  <li>
    <Codesandbox id="p9umgf" tags={['html', 'scroll']} />
  </li>
  <li>
    <Codesandbox id="k8phr" />
  </li>
  <li>
    <Codesandbox id="dix1y" />
  </li>
  <li>
    <Codesandbox id="zcuqh" />
  </li>
  <li>
    <Codesandbox id="7ucso" />
  </li>
  <li>
    <Codesandbox id="py4db" />
  </li>
  <li>
    <Codesandbox id="hf1cs" />
  </li>
  <li>
    <Codesandbox id="39hg8" />
  </li>
  <li>
    <Codesandbox id="wbrfs" />
  </li>
  <li>
    <Codesandbox id="itfgk" />
  </li>
  <li>
    <Codesandbox id="iup24" />
  </li>
  <li>
    <Codesandbox id="zu2wo" />
  </li>
  <li>
    <Codesandbox id="1g4qq" />
  </li>
  <li>
    <Codesandbox id="z8e6m" />
  </li>
  <li>
    <Codesandbox id="h545c" />
  </li>
  <li>
    <Codesandbox id="0k27n" />
  </li>
  <li>
    <Codesandbox id="d36mw" />
  </li>
  <li>
    <Codesandbox id="h873k" />
  </li>
  <li>
    <Codesandbox id="08s1u" />
  </li>
  <li>
    <Codesandbox id="wvgxp" />
  </li>
  <li>
    <Codesandbox id="5xho4" />
  </li>
  <li>
    <Codesandbox id="mbfzf" />
  </li>
  <li>
    <Codesandbox id="mkq8e" />
  </li>
  <li>
    <Codesandbox id="12nmp" />
  </li>
  <li>
    <Codesandbox id="6oei7" />
  </li>
  <li>
    <Codesandbox id="3k4g6" />
  </li>
  <li>
    <Codesandbox id="3878x" />
  </li>
  <li>
    <Codesandbox id="1b40u" />
  </li>
  <li>
    <Codesandbox id="0ycwe" />
  </li>
  <li>
    <Codesandbox id="ib0jc" />
  </li>
</Grid>
